<script>
import {Calendar} from '@fullcalendar/core';
import multiMonthPlugin from '@fullcalendar/multimonth';

export default {
  data() {
    return {
      calendar: null,
    };
  },
  methods: {
    setEvents(array) {
      this.calendar.setOption('events', array);
      this.calendar.refetchEvents();
    },
    renderCalendar(array) {
      this.calendar = new Calendar(document.querySelector('#calendar'), {
        plugins: [multiMonthPlugin],
        initialView: 'multiMonthYear',
        multiMonthMaxColumns: 2,
        locale: 'zh-cn',
        headerToolbar: false,
        eventDisplay: 'block',
        eventTextColor: '#fff',
        events: array,
      });
      this.calendar.render();
    },
  },
};
</script>

<template>
  <div id="calendar"></div>
</template>

<style scoped lang="less">
#calendar {
  width: 800px;
  height: 800px;
}

/deep/ .fc-day-sat .fc-daygrid-day-number {
  color: red;
}

/deep/ .fc-day-sun .fc-daygrid-day-number {
  color: red;
}
</style>
